<template>
  <div id="home_app">
      <el-card>
          <el-button @click="getContent" type="primary">获取内容</el-button>
          <el-button @click="setContent" type="warning">设置内容</el-button>
          <el-divider></el-divider>
          <vue-wangeditor ref="editorRef" id="editor" width="100%" height="400" v-model="text"></vue-wangeditor>
          <el-divider></el-divider> 
          <!-- 柱状图 -->
          <Bar/>
          <el-divider></el-divider>
          <LinePic/>
          <el-divider></el-divider>
          <Pie/>
      </el-card>
  </div>    
</template>

<script>
import Bar from './Bar'
import LinePic from './Line'
import Pie from './Pie'
import vueWangeditor from 'vue-wangeditor'


export default {
    methods:{
        getContent(){
            var html = this.$refs.editorRef.getHtml()
            console.log(html)
        },
        setContent(){
            var html = "<img src='https://feed-image.baidu.com/0/pic/f9c66967d047811828908442ba9714b0.jpg'>"
            this.$refs.editorRef.setHtml(html)
        },
        
    },
    data(){
        return {
            text: "<h1>hello world</h1><img src='https://feed-image.baidu.com/0/pic/f9c66967d047811828908442ba9714b0.jpg'>"
        }
    },
    components: {
        Bar,
        LinePic,
        Pie,
        vueWangeditor
    }
}
</script>

<style>

</style>